<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				border:1px red solid;
				width:500px;
				margin:auto;
			}
			.box nav{
				height:50px;
				display:flex;
			}
			a{
				text-decoration:none;
				display:block;
				flex:1;
				text-align:center;
				line-height:50px;
			}
			.content div{
				height:300px;
				font-size:30px;
				text-align:center;
				line-height:300px;
				display:none;
			}
			.content .zhanshi{
				display:block;
			}
			.yanse{
				background:#333;
				color:#fff;
			}
		</style>
	</head>
	<body>
		<h1 align="center">tab选项卡</h1>
		<div class="box">
			<nav>
				<a href="#" class="yanse">选项一</a>
				<a href="#">选项二</a>
				<a href="#">选项三</a>
				<a href="#">选项四</a>
			</nav>
			<div class="content">
				<div class="zhanshi">选项一内容</div>
				<div class="">选项二内容</div>
				<div class="">选项三内容</div>
				<div class="">选项四内容</div>
			</div>
		</div>
	</body>
	<script>
		var anniu=document.getElementsByTagName('a');
		var content=document.getElementsByClassName('content')[0];
		var div=content.getElementsByTagName('div');
		for(var i=0;i<anniu.length;i++){
			anniu[i].index=i;
			anniu[i].onclick=function(){
				for(var j=0;j<anniu.length;j++){
					anniu[j].className='';
					div[j].className='';
				}
				this.className='yanse';
				div[this.index].className="zhanshi";
			}
		}
	</script>
</html>
